<template>
    <div>
        <!-- 表格操作项 start  -->
        <Button v-for="(item, index) in tableBtn"
                :key="index"
                type="primary"
                :icon="item.icon"
                class="ivu-mr-8"
                @click="tableTopOperate(item.name)">{{ item.label }}</Button>
        <!-- <Button icon="md-list"
                class="ivu-ml-8"
                v-show="tableBatchBtns && tableBatchBtns.length>0 && tableSelectData &&tableSelectData.length">批量操作</Button> -->
        <Dropdown class="ivu-ml-8"
                  v-show="tableSelectData && tableSelectData.length>0"
                  @on-click="handleClickItem">
            <Button>更多操作
                <Icon type="ios-arrow-down" /></Button>
            <DropdownMenu slot="list">
                <DropdownItem v-for="(item, index) in tableBatchBtns"
                              :key="index"
                              :name="item.name">{{item.label}}</DropdownItem>
            </DropdownMenu>
        </Dropdown>
        <!-- 表格操作项 end  -->

        <Modal v-model="auditModal"
               title="批量审核">
            <Form ref="auditForm"
                  :model="auditFormData"
                  :label-width="100">
                <component v-for="(item, index) in auditCompsData"
                           :key="index"
                           :itemData="item.data"
                           :formData.sync="auditFormData"
                           v-bind:is="item.fileName"
                           @handleChangeFormData="handleChangeFormData"></component>

            </Form>
            <div slot="footer">
                <Button type="primary"
                        :loading="aloading"
                        @click.stop="handleAgree('auditForm')">
                    <span v-if="!aloading">同意</span>
                    <span v-else>Loading...</span>
                </Button>
                <Button type="default"
                        :loading="cloading"
                        @click.stop="handleCancel('auditForm')">
                    <span v-if="!cloading">拒绝</span>
                    <span v-else>Loading...</span>
                </Button>
            </div>
        </Modal>
    </div>
</template>
<script>
    import { ApiRequest } from '@api/basePage';
    import dynamictablebtns from '@/mixins/dynamictablebtns'; // 混入通用代码
    import qwInput from '@/components/common/formItem/qwInput'; // input组件
    import qwSelect from '@/components/common/formItem/qwSelect'; // select组件
    export default {
        mixins: [
            dynamictablebtns
        ],
        components: { qwInput, qwSelect },
        data () {
            return {
                auditModal: false,
                auditCompsData: [ // 组件信息
                    {
                        fileName: 'qwSelect', // 组件文件名称
                        fileUrl: 'common', // 组件目录关键字 common：通用模板 custom：自定义模板
                        data: {
                            name: 'chooseReason',
                            value: '', // 单选时只接受 String 或 Number，多选时只接受 Array
                            label: '选择原因',
                            type: 'select',
                            placeholder: '请选择权益卡',
                            filterable: true, // 是否可搜索
                            multiple: false, // 是否多选
                            selectList: [
                                {
                                    value: '0',
                                    label: '商品重复'
                                },
                                {
                                    value: '1',
                                    label: '商品不符合规范'
                                },
                                {
                                    value: '2',
                                    label: '描述信息不相符'
                                }
                            ]
                        }
                    },
                    {
                        fileName: 'qwInput', // 组件文件名称
                        fileUrl: 'common', // 组件目录关键字 common：通用模板 custom：自定义模板
                        data: {
                            name: 'inputReason', // 字段name
                            value: '', // 字段value值 String 或 Number
                            label: '输入原因', // 字段label
                            type: 'textarea', // 字段类型
                            inputType: 'textarea', // input 类型
                            placeholder: '请输入审核批注，拒绝时，此为必填项', // 字段placeholder
                            autosize: {
                                minRows: 3, // 最少行数
                                maxRows: 5 // 最大行数
                            }
                        }
                    }
                ],
                auditFormData: {
                    chooseReason: '',
                    inputReason: ''
                },
                aloading: false,
                cloading: false
            }
        },
        methods: {
            // 获得选中项的uuid集合
            getUuids () {
                let uuidArr = []
                this.tableSelectData.forEach(item => {
                    uuidArr.push(item.uuid)
                });
                return uuidArr.join('-');
            },
            // table 操作列点击事件
            handleClickItem (name) {
                if (name === 'delete') {
                    let data = {
                        uuid: this.getUuids()
                    }
                    // 开始请求列表
                    ApiRequest(this.requestApi.delTableList.url, this.requestApi.delTableList.type, data).then(res => {
                        if (res.retStatus === '1') {
                            this.$Message.success('批量删除成功');
                            this.tableSelectData = [];
                            this.actionsChange();
                        }
                    })
                } else if (name === 'audit') { // 操作类型为confirm时 打开modal弹窗
                    this.auditModal = true;
                } else if (name === 'lowerShelf') {
                    this.$Modal.confirm({
                        title: '批量下架',
                        content: '确定要下架这些商品吗？',
                        onOk: () => {
                            let data = {
                                uuid: this.getUuids()
                            }
                            // 开始请求商品列表
                            ApiRequest(this.requestApi.toLowerShelf.url, this.requestApi.toLowerShelf.type, data).then(res => {
                                this.$Message.success('商品已成功下架');
                                this.actionsChange();
                            })
                        }
                    });
                }
            },
            // 组件内数据改变
            handleChangeFormData (data) {
                this.$set(this.$data, 'auditFormData', data);
            },
            // 审核通过
            handleAgree (name) {
                if (this.auditFormData.chooseReason === '' && this.auditFormData.inputReason === '') {
                    this.$Message.error('请选择原因!');
                    return false;
                }
                this.aloading = true;
                let data = {
                    auditType: '0', // 审核通过
                    uuid: this.getUuids(),
                    chooseReason: this.auditFormData.chooseReason,
                    inputReason: this.auditFormData.inputReason
                }
                // 开始请求商品列表
                ApiRequest(this.requestApi.toAudit.url, this.requestApi.toAudit.type, data).then(res => {
                    this.aloading = false;
                    this.$Message.success('批量审核成功');
                    this.auditModal = false;
                    this.actionsChange();
                })
            },
            // 拒绝审核
            handleCancel (name) {
                if (this.auditFormData.chooseReason === '' && this.auditFormData.inputReason === '') {
                    this.$Message.error('请选择原因!');
                    return false;
                }
                this.aloading = true;
                let data = {
                    auditType: '1', // 审核不通过
                    uuid: this.getUuids(),
                    chooseReason: this.auditFormData.chooseReason,
                    inputReason: this.auditFormData.inputReason
                }
                // 开始请求商品列表
                ApiRequest(this.requestApi.toAudit.url, this.requestApi.toAudit.type, data).then(res => {
                    this.aloading = false;
                    this.$Message.success('批量拒绝成功');
                    this.auditModal = false;
                    this.actionsChange();
                })
            }
        }
    }
</script>
